<template>
  <div>
    <van-popup
      class="menu-draw"
      v-model="showMn"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <div class="login-title">{{ $t("WelcomeToRollingBoxes") }}</div>
      <div class="login-title-sub">Please Login to your account or Sign up</div>
      <button id="google-signin-btn-0" class="google-login-content">
        <div class="google-login-btn">
          <img
            class="fb-icon"
            src="/static/img/main/google-logo.svg"
            alt=""
          />Login with Google
        </div>
      </button>
      <div class="google-login-content">
        <div class="face-login-btn">
          <img
            src="/static/img/main/facebook.svg"
            alt=""
            class="fb-icon"
          />Login with FaceBook
        </div>
      </div>
      <div class="or-content">OR</div>
      <div  class="google-login-content">
        <div  class="login-btn" @click="goToLogin('login')">
          <div  class="login-text">Login</div>
        </div>
      </div>
      <div  class="google-login-content"><div  @click="goToLogin('sign')" class="sign-btn">Sign Up</div></div>
      <div  class="login-tip">By loggining and signing up, you agree to Rolling boxes’s</div>
      <div  class="login-tap">Terms &amp; Privacy</div>
      <div
        class="menu-row"
        v-for="(item, index) in menus.filter((f) => f.roles.includes(isLogin))"
        :key="index"
        :class="{ 'menu-row-active': isActive == index }"
        @click="gotoPath(item.name)"
      >
        <div
          class="menu-img box-img"
          v-if="item.icon && (isActive != index || !item.icon_a)"
        >
          <img :src="menusBaseUrl + item.icon" alt="" />
        </div>
        <div class="menu-img box-img" v-if="item.icon_a && isActive == index">
          <img :src="menusBaseUrl + item.icon_a" alt="" />
        </div>
        <div class="menu-name">{{ $t(item.title) }}</div>
      </div>

      <div class="theme-row">
        <div class="theme-content">
          <!-- <i class="iconfont icon-rijianmoshi"></i
          ><i class="iconfont icon-yejianmoshi theme-active"></i> -->
          <span
            class="icon iconfont"
            :class="{ 'theme-active': themeActive == 1 }"
            @click="setTheme(1)"
            >&#xe60d;</span
          >
          <span
            class="icon iconfont"
            :class="{ 'theme-active': themeActive == 2 }"
            @click="setTheme(2)"
            >&#xe63e;</span
          >
        </div>
      </div>
    </van-popup>
    <van-dialog
      v-model="showLogOut"
      title="Tips"
      :showCancelButton="true"
      :confirmButtonColor="'#00dcab'"
      @confirm="logOut"
    >
      <div class="content">Are you sure you want to log out？</div>
    </van-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: {
    showMenu: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    ...mapState(["theme", "isLogin"]),
    themeActive() {
      let ret = this.theme;

      return ret;
    },
  },
  watch: {
    showMenu(n, o) {
      this.showMn = n;
      console.log(this.showMn);
    },
    showMn(n, o) {
      if (!n) {
        this.closeMenu();
      }
    },
  },
  data() {
    return {
      showLogOut: false,
      showMn: false,
      menusBaseUrl: "static/img/unboxingDetail/",
      isActive: -1,
      menus: [
        {
          icon: "box.svg",
          title: "MYSTERYBOXES",
          name: "index",
          roles: [1], //1 登录 0 未登录
        },
        {
          title: "MYSTERYBOXES",
          name: "index",
          roles: [0], //1 登录 0 未登录
        },
        {
          title: "Unboxings",
          name: "box",
          roles: [0], //1 登录 0 未登录
        },
        {
          icon: "photocamera.svg",
          icon_a: "photocamera-active.svg",
          title: "Profile",
          name: "mine",
          roles: [1], //1 登录 0 未登录
        },
        {
          icon: "affiliates-mobile.svg",
          title: "affiliates",
          roles: [1], //1 登录 0 未登录
        },
        {
          icon: "inventory.svg",
          icon_a: "inventory_a.svg",
          title: "inventory",
          roles: [1], //1 登录 0 未登录
        },
        {
          icon: "history.svg",
          icon_a: "history_a.svg",
          title: "history",
          name: "boxLog",
          roles: [1], //1 登录 0 未登录
        },
        {
          icon: "money.svg",
          icon_a: "money_a.svg",
          title: "PlaceOrder",
          name: "order",
          roles: [1], //1 登录 0 未登录
        },
        {
          icon: "exit.svg",
          title: "Logout",
          name: "Logout",
          roles: [1], //1 登录 0 未登录
        },
        {
          title: "HowItWorks",
          name: "howItWork",
          roles: [1, 0], //1 登录 0 未登录
        },
        {
          title: "TermsService",
          roles: [1], //1 登录 0 未登录
        },
        {
          title: "faq",
          name: "faq",
          roles: [1, 0], //1 登录 0 未登录
        },
      ],
    };
  },
  methods: {
    goToLogin(type){
this.$router.push({
        name: 'LoginPage',
        query:{
          type
        }
      });
    },
    gotoPath(name) {
      if ("Logout" == name) {
        this.showLogOut = true;

        return;
      }
      this.$router.push({
        name: name,
      });
    },
    goToBox() {
      this.$router.push({
        name: "box",
      });
    },
    logOut() {
      this.setIsLogin(0);
      this.goToBox();
    },
    ...mapMutations(["setColor", "setIsLogin"]),
    setTheme(index) {
      //   this.themeActive = index
      this.setColor(index);
    },
    closeMenu() {
      this.$emit("closeMenu");
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-draw {
  background: var(--menu-d-bg);
  .login-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 32px;
    text-align: center;
    color: var(--text-color);
  }
  .menu-row {
    border-bottom: 1px solid var(--menu-border);
    width: 100%;
    height: 52px;
    padding: 15px 0 15px 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .menu-img {
      width: 20px;
      height: 20px;
      background-size: 100% 100%;
    }
    .menu-name {
      margin-left: 12px;
      font-size: 14px;
      font-weight: 500;
      color: #76797b;
      text-transform: uppercase;
    }
  }
  .menu-row-active .menu-name {
    background-image: linear-gradient(97deg, #f48836, #f4364c);
    font-weight: 500;
    letter-spacing: 0.57px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .theme-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    margin-top: 10px;
    .theme-content {
      width: 80px;
      height: 32px;
      padding: 0 4px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: hsla(0, 0%, 100%, 0.7);
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

      border-radius: 20px;
      margin: 0 20px;
      .icon-yejianmoshi:before {
        content: "\e620";
      }
      .icon-rijianmoshi:before {
        content: "\e623";
      }
      .iconfont {
        cursor: pointer;
        opacity: 0.5;

        font-size: 21px;
        font-weight: 600;
      }
      .theme-active {
        color: #f80;
        opacity: 1;
        font-weight: 700;
      }
    }
  }

   .login-tip {
    width: 100%;
    font-size: 12px;
    color: #5b6873;
    margin: 10px 0;
    text-align: center;
}

  .login-title-sub {
    font-size: 14px;
    line-height: 1.31;
    letter-spacing: 0.57px;
    text-align: center;
    margin: 0 0 20px;
    white-space: nowrap;
    color: #5b6873;
  }

  .google-login-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
  }
  .fb-icon {
    width: 17px;
    height: 23px;
    object-fit: contain;
    margin-right: 10px;
  }
  .google-login-btn {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ca423e;
    border-radius: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
  }
  .google-login-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
  }
  .face-login-btn {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #327ab7;
    border-radius: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }
  .or-content {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #5b6873;
  }
  .google-login-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
  }
  .login-btn {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(98deg, #f48836, #f4364c 100%);
    border-radius: 40px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 24px;
  }
  .login-text {
    font-size: 16px;
    color: #fff;
    margin-left: 6px;
  }
  .google-login-content {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: transparent;
  }
  .sign-btn {
    text-transform: uppercase;
    width: 100%;
    height: 40px;
    border: 2px solid #747c7f;
    color: #747c7f;
    font-size: 16px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin-bottom: 20px;
  }
  .login-tap {
    font-size: 12px;
    color: #f80;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
</style>